<template>
  <div ref="vueEchartContainer" style="width: 100%;height:100%;">
    <VueEchart :option="options" style="width: 100%;height:100%;" />
    <div>
      <slot></slot>
    </div>
  </div>
</template>
<!--
author： 叶明龙
email： 18591978263@126.com
眼睛原型进度条
-->
<script>
const elementResizeDetectorMaker = require("element-resize-detector");
const erd = elementResizeDetectorMaker();
import VueEchart from "./VueEchart";
export default {
  name: "CircularEyeProgress",
  props: {
    // 背景色
    backgroundColor: {
      type: String,
      default: "#003763"
    },
    // 前景色
    foregroundColor: {
      type: String,
      default: "#02e1ff"
    },
    barWidth: {
      type: Number,
      default: 25
    },
    total: {
      type: Number,
      default: 100
    },
    value: {
      type: Number,
      default: 40
    }
  },
  computed: {
    options() {
      const backgroundColor = this.backgroundColor;
      const foregroundColor = this.foregroundColor;
      const value = this.value;
      const total = this.total;
      const barWidth = this.barWidth;
      const size = this.size;
      const option = {
        polar: {
          radius: [size - barWidth, size],
          center: ["50%", "50%"]
        },
        angleAxis: {
          max: total,
          startAngle: 90,
          show: false
        },
        radiusAxis: {
          type: "category",
          show: true,
          axisLabel: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        series: [
          // 外边框
          {
            name: "外边框",
            type: "pie",
            radius: [size - 1, size],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center"
            },
            data: [
              {
                value: value,
                itemStyle: {
                  color: foregroundColor
                }
              }
            ]
          },
          // 内圈
          {
            name: "内圈",
            type: "bar",
            roundCap: false,
            barWidth: barWidth,
            showBackground: true,
            backgroundStyle: {
              color: backgroundColor
            },
            coordinateSystem: "polar",
            itemStyle: {
              normal: {
                color: foregroundColor
              }
            },
            data: [value]
          },
          // 刻度盘
          {
            name: "刻度盘",
            type: "gauge",
            zlevel: 5,
            splitNumber: 180,
            radius: size - barWidth + 12,
            center: ["50%", "50%"],
            startAngle: 90,
            endAngle: -360,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitLine: {
              show: true,
              length: 8,
              lineStyle: {
                width: 1,
                color: backgroundColor
              }
            },
            pointer: {
              show: 0
            },
            detail: {
              show: 0
            }
          }
        ]
      };
      return option;
    }
  },
  data() {
    return {
      size: 300
    };
  },
  components: {
    VueEchart
  },
  mounted() {
    erd.listenTo(this.$refs.vueEchartContainer, element => {
      const width = element.offsetWidth;
      const height = element.offsetHeight;
      this.size = Math.min(...[width, height]) / 2;
    });
  },
  beforeDestroy() {
    erd.uninstall(this.$refs.vueEchartContainer);
  }
};
</script>
<style lang="scss" scoped>
.bar-radius {
  width: 120px;
  height: 120px;
  margin: 0 auto;
  border-radius: 100%;
}
</style>
